<template>
  <div class="container">
    <div class="video-box">
      <!-- 视频播放区域 -->
      <video
        v-if="!imagePath"
       poster="" class="video-sty " webkit-playsinline="true" playsinline="true" style="object-fit: cover;"
      />
      <!-- 展示图片 -->
      <img v-else class="video-sty" :src="imagePath" mode=""></img>
    </div>
    <!-- 操作 -->
    <div class="options" style="width: 100vw;">
      <div class="options-item" @click="againPhoto">重拍</div>
      <template v-if="!imagePath">
        <img style="width: 60px;height: 60px;margin: 70px 40px;" src="../assets/kuaimen.png" @click="takePhoto" />
        <img style="width: 60px;height: 60px;margin: 70px 40px;" src="../assets/fzjt.png" @click="switchCamera" />
      </template>
      <template v-else>
        <div class="options-item" @click="uploadPhoto">上传</div>
      </template>
    </div>
  </div>
</template>

<script setup>
import api from "@/request/api";
import { ref, reactive, onMounted, onUnmounted } from "vue";
// 视频流
let videoStream = null;
// 视频
let videoRef = ref(null);
// 图片地址
let imagePath = ref("");
// 摄像头方向  environment  user
let facingModeType = ref("environment");
// 开启摄像头
const startCamera = async () => {
  // 获取拍照视频流
  videoStream = await navigator.mediaDevices.getUserMedia({
    video: {
      facingMode: facingModeType.value,
      width: {
        min: 1900,
        ideal: 900,
        max: 3560,
      },
      height: {
        min: 1506.25,
        ideal: 506.25,
        max: 2440,
      },
      // frameRate: {
      // 	ideal: 60,
      // 	max: 120
      // }
    },
    audio: false,
  });
  let dom = document.getElementsByTagName("video")[0];
  videoRef.value = dom;
  dom.srcObject = videoStream;
  dom.play();
};
// 关闭摄像头
let stopCamera = async () => {
  if (videoStream) {
    videoStream.getTracks().forEach((track) => track.stop()); // 停止所有轨道
  }
};
// 拍照
const takePhoto = () => {
  // 创建 canvas 元素
  const canvas = document.createElement("canvas");
  const video = videoRef.value;

  // 设置 canvas 的宽高与视频一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 将视频画面绘制到 canvas 上
  const context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 将 canvas 转换为图片
  imagePath.value = canvas.toDataURL("image/png");
  console.log("拍照成功:", imagePath.value);

  // 停止视频流
  stopCamera();
};
// 重怕
const againPhoto = () => {
  imagePath.value = "";
  startCamera();
};
const click = () => {
  uni.setClipboardData({
    data: imagePath.value,
    success: function () {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 2000,
      });
    },
    fail: function () {
      uni.showToast({
        title: "复制失败",
        icon: "none",
        duration: 2000,
      });
    },
  });
};
// 摄像头反转
const switchCamera = () => {
  facingModeType.value =
    facingModeType.value === "environment" ? "user" : "environment";
  imagePath.value = "";
  startCamera();
};
// 上传图片
const uploadPhoto = async () => {
    api.common
    .ocr({
      image: imagePath.value,
    })
    .then((res) => {
      if (res?.status == 200) {
        // title: "上传成功",
        let { name, sex, number, address, year, month, day } =
          res.data.content.data.info;

        let prams = {
          name,
          gender: sex === "男" ? 1 : 2,
          cin: number,
          address,
          birth: `${year}-${month}-${day}`,
        };

        emit("submit", prams);
        imagePath.value = "";
      }
    });
};

onMounted(() => {
  startCamera();
});
onUnmounted(() => {
  stopCamera();
});
</script>

<style lang="scss" scoped>
.container {
  .video-box {
    width: 100vw;
    height: calc(100vh - 216px);

    .video-sty {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .options {
    width: 100%;
    height: 216px;
    background-color: #333;
    display: flex;

    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 32px;
    }
  }
}
</style>
